<template>
  <!--最外层的div-->
  <div class="layout-container">
    <div class="layout-container-table">
      <div class="layout-container-form-handle">
        <el-button @click="toRun"
                   type="primary">开始养号</el-button>

        <el-button @click="stopRun"
                   type="primary">停止养号</el-button>
      </div>

      <el-form label-position="top"
               style="margin-top:20px;">
        <el-form-item label="评论设置">
          <el-input type="textarea"
                    @change="changeComment"
                    placeholder="请输入评论的内容，多个评论，使用&符号隔开"
                    v-model="wx_comment"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <!-- 打开弹窗选择几台手机 -->
    <el-dialog v-model="showSelNumDio"
               title="选择执行任务的手机数量"
               width="30%"
               center>
      <el-form>
        <el-form-item>
          <el-input type="number"
                    v-model="phoneNum"></el-input>

          <el-checkbox v-model="isAll"
                       style="margin-top:10px;">选择所有的空闲手机</el-checkbox>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showSelNumDio = false">取消</el-button>
          <el-button type="primary"
                     @click="toRun1">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, getCurrentInstance } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import {
  updateCommentMsgApi,
  getCommentMsgApi,
  runWxApi,
  stopRunApi,
} from "@/api/yuange/wx";
export default defineComponent({
  name: "crudTable",
  data() {
    return {};
  },
  created() {},
  setup() {
    //定义wx_comment 参数
    const wx_comment = ref("");
    const showSelNumDio = ref(false); //控制选择几台手机的弹窗
    const phoneNum = ref(1); //选择几台手机执行任务
    const isAll = ref(false); //是不是选中全部的手机

    getCommentMsgApi().then((res) => {
      console.log(res, "获取评论内容");
      wx_comment.value = res.data;
    });

    //修改评论内容
    const changeComment = (e: any) => {
      console.log(e);
      ElMessageBox.confirm("确定修改吗?", "Warning", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let data = {
          wx_comment: e,
        };

        updateCommentMsgApi(data).then((res) => {
          console.log(res, "修改结果");
          if (res.code == 200) {
            ElMessage.success("运行成功");
          }
        });
      });
    };

    //点击开始养号
    const toRun = () => {
      showSelNumDio.value = true;
      //打开弹窗，选择几台手机
      // runWxApi().then((res) => {
      //   console.log("养号");
      // });
    };
    //点击开始养号
    const toRun1 = () => {
      //关闭弹窗
      showSelNumDio.value = false;

      if (isAll.value == false && phoneNum.value <= 0) {
        ElMessage.warning("选择的手机数量不能小于0");
        return;
      }

      let data = {
        isAll: isAll.value,
        phoneNum: parseInt(phoneNum.value || 0),
      };
      runWxApi(data).then((res) => {
        ElMessage.success("运行成功");
      });
    };

    //停止养号
    const stopRun = () => {
      stopRunApi().then((res: any) => {
        console.log(res);
        ElMessage.success("运行成功");
      });
    };

    return {
      stopRun,
      phoneNum,
      isAll,
      showSelNumDio,
      wx_comment,
      changeComment,
      toRun,
      toRun1,
    };
  },
  methods: {},
});
</script>

<style lang="scss" scoped>
</style>